// 配置文档 https://www.webpackjs.com/configuration/
const path = require('path');

/**
 *  管理输出添加---用来创建默认的index.html 如果已有会被替换
 *  想要了解更多 https://github.com/jantimon/html-webpack-plugin
 *  除了默认模板之外，还提供了一些额外的功能。https://github.com/jaketrent/html-webpack-template
 * */
const HtmlWebpackPlugin = require('html-webpack-plugin');

/**
 * 管理输出添加---清理 /dist 文件夹
 * 它是一个比较普及的管理插件，让我们安装和配置下。 https://www.npmjs.com/package/clean-webpack-plugin
 */
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// 模块热替换 +
const webpack = require('webpack');
// 添加Vue + 
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 把css隔离出来 打包的时候单独打包成一个css
const ExtractTextPlugin = require("extract-text-webpack-plugin");

/**
 * 添加vue
 */
module.exports = {
    entry: {
        app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        hot: true
    },
    module: {
        rules: [
            // +
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(sc|sa|c)ss$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: ['css-loader', 'sass-loader']
                })
            }
        ]
    },
    // +
    resolve: {
        extensions: [
            '.vue', '.js'
        ],
        modules: ["node_modules"],
        alias: {
            vue: 'vue/dist/vue.min.js',
            components: path.resolve(__dirname + '/src/components/'),
            '@': path.resolve('src')
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Output Management'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        // 请确保引入这个插件！
        new VueLoaderPlugin(), // +
        // 隔离css
        new ExtractTextPlugin("[name].[hash:8].css"),
    ],
    output: {
        filename: '[name].[hash:8].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
};

// /**
//  * 模块热替换
//  * 
//  */
// module.exports = {
//     entry: {
//         app: './src/index.js'
//     },
//     devtool: 'inline-source-map',
//     devServer: {
//         contentBase: './dist',
//         hot: true
//     },
//     module: {
//         rules: [
//             {
//                 test: /\.css$/,
//                 use: [
//                     'style-loader',
//                     'css-loader'
//                 ]
//             }
//         ]
//     },
//     plugins: [
//         new CleanWebpackPlugin(),
//         new HtmlWebpackPlugin({
//             title: 'Output Management'
//         }),
//         new webpack.NamedModulesPlugin(), // +
//         new webpack.HotModuleReplacementPlugin(), // +
//     ],
//     output: {
//         filename: '[name].bundle.js',
//         path: path.resolve(__dirname, 'dist'),
//         publicPath: '/' 
//     }
// };


/**
 * 开发模块
 * 1. 添加source-map 用于追踪到错误和警告在源代码中的原始位置
 *    比如a.js b.js c.js 经过build后会整合到一个bundle.js里，如果有一个文件报错，可以准确的追踪到源文件位置
 * 2. 添加 devServer 类似vue npm run start 会自动刷新浏览器
 *    webpack-dev-server 配置文档 https://www.webpackjs.com/configuration/dev-server/
 */
// module.exports = {
//     entry: {
//         app: './src/index.js',
//         print: './src/print.js'
//     },
//     devtool: 'inline-source-map',
//     devServer: {
//         contentBase: './dist'
//     },
//     plugins: [
//         new CleanWebpackPlugin(),
//         new HtmlWebpackPlugin({
//             title: '开发模块'
//         })
//     ],
//     output: {
//         filename: '[name].bundle.js',
//         path: path.resolve(__dirname, 'dist'),
//         publicPath: '/' // +
//     },
//     module: {
//         rules: [
//             {
//                 test: /\.css$/,
//                 use: [
//                     'style-loader',
//                     'css-loader'
//                 ]
//             }
//         ]
//     }
// };



// 管理输出
// module.exports = {
//     entry: {
//         app: './src/index.js',
//         print: './src/print.js'
//     },
//     plugins: [
//         new CleanWebpackPlugin(['dist']),
//         new HtmlWebpackPlugin({
//             title: 'Output Management'
//         })
//     ],
//     output: {
//         filename: '[name].bundle.js',
//         path: path.resolve(__dirname, 'dist')
//     },
//     module: {
//         rules: [
//             {
//                 test: /\.css$/,
//                 use: [
//                     'style-loader',
//                     'css-loader'
//                 ]
//             }
//         ]
//     }
// };

// 初始化--管理资源
// module.exports = {
//     entry: './src/index.js',
//     output: {
//         filename: 'bundle.js',
//         path: path.resolve(__dirname, 'dist')
//     },
//     module: {
//         rules: [
//             {
//                 test: /\.css$/,
//                 use: [
//                     'style-loader',
//                     'css-loader'
//                 ]
//             }
//         ]
//     }
// };


